<template>
    <view>
        <!-- 顶部 -->
        <view class="flex aic c9 jcsb">
            <view class="flex aic fs24">
                <view class="nav">
                    <image :src="giveAvatar(item)" mode="aspectFill"></image>
                </view>
                <view class="mgl20 mgr20 c0 nameLimit">
                    {{ giveName(item) }}
                </view>
                <view>
                    <uni-dateformat :date="item.publish_date" :threshold="[60000,3600000*24*30]"
                        format="MM月dd hh :mm"></uni-dateformat>
                </view>
            </view>

            <view class="fs40" @click="ckMore(item)"> <van-icon name="ellipsis" /></view>
        </view>

        <!-- 内容 -->
        <view>
            <view class="fs36 fwb mgt20 mgb20 contentLimit" @click="toPage(item._id)">{{ item.title }}</view>
            <view class="fs18 c8 contentLimit txtint2" @click="toPage(item._id)" v-if="item.des">{{ item.des }}</view>
            <view class="pclist" v-if="item.imgUrl">
                <view v-for="(i,index) in item.imgUrl" :key="index" :class="item.imgUrl.length==1?'only':''" class="pic"
                    @click="ckPic(item.imgUrl,index)">
                    <image :src="i" mode="aspectFill"></image>
                </view>
            </view>
        </view>
        <!-- 底部 -->
        <view class="botm">
            <view class="iconfont icon-icon-test"><text>{{ item.view_count }}</text></view>
            <view class="iconfont icon-icon-test2" @click="toPage(item._id)">
                <text>{{ item.comment_count?item.comment_count:'评论' }}</text>
            </view>
            <view class="iconfont icon-icon-test48" :class="item.myLike?'active':''" @click="ckLike(item)">
                <text>{{ item.like_count ?item.like_count:'点赞' }}</text>
            </view>
        </view>

        <!-- 反馈参数 -->
        <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" cancel-text="取消"
            close-on-click-action :close-on-click-overlay="false" />
    </view>
</template>

<script setup>
    import {
        reactive,
        ref
    } from 'vue';
    import {
        giveAvatar,
        giveName,
        getRole,
        likeFun
    } from '../../uitls/tools.js';
    import {
        store
    } from '@/uni_modules/uni-id-pages/common/store.js';
    import pageJson from '@/pages.json';
    defineProps({
        item: {
            type: Object,
            default: {},
        },
        myLike: {
            type: Boolean,

        },
        like_count: {
            type: Number
        }
    });
    const db = uniCloud.database();

    // 图片预览
    function ckPic(imgurl, index) {
        let url = Object.values(imgurl);
        uni.previewImage({
            urls: url,
            current: index
        })
    }
    //跳转详情页
    function toPage(id) {
        uni.navigateTo({
            url: '/pages/detail/detail?id=' + id
        })
    }
    // 反馈按钮
    let show = ref(false);
    const actions = [{
            name: '修改',
            type: 'edit',
        },
        {
            name: '删除',
            type: 'del',
            color: '#ff0000'
        },

    ];
    // 操作数据

    let artItem = {};
    const emits = defineEmits(["getSon"]);

    function ckMore(item) {
        artItem = item;
        let uid = uniCloud.getCurrentUserInfo().uid;
        if (item.user_id[0]._id == uid || getRole('webmaster')) {
            show.value = true;
        } else return;

    }
    //点击弹出
    function onSelect(item) {
        show.value = false;
        if (item.type == 'del') {
            delArt();
        }
    }
    //删除文章
    function delArt() {
        uni.showToast({
            title: '删除中...',
            icon: 'none'
        })
        db.collection('fyquanzi_art').doc(artItem._id).update({
            delState: true
        }).then(res => {
            emits('getSon', 'delOk');
            uni.hideLoading();
        })
    }

    let like_timer = 0;

    function ckLike(item, myLike, like_count) {
        if (!store.hasLogin) {
            uni.showModal({
                title: "是否确认登陆",
                success: res => {
                    uni.navigateTo({
                        url: "/" + pageJson.uniIdRouter.loginPage
                    })
                }
            })
            return;
        }
        let timer = Date.now();
        if (timer - like_timer < 2000) {
            uni.showToast({
                title: '点击过于频繁',
                icon: "none"
            });
            return;
        }
        like_timer = timer;

        item.myLike ? item.like_count-- : item.like_count++;
        item.myLike = !item.myLike;
        // emits('update:myLike', isLike);
        likeFun(item._id);

    }
</script>

<style scoped lang="scss">
    .nav {
        width: 50rpx;
        height: 50rpx;

        image {
            width: 100%;
            height: 100%;
            border-radius: 50%;
        }
    }

    .pclist {
        padding-top: 20rpx;
        display: flex;

        .pic {
            width: 255rpx;
            height: 255rpx;
            margin-right: 6px;
            overflow: hidden;

            image {
                width: 100%;
                height: 100%;
            }

            &:first-child {
                border-radius: 20rpx 0 0 20rpx;
            }

            &:last-child {
                border-radius: 0 20rpx 20rpx 0;
            }

            &.only {
                border-radius: 20rpx;
            }
        }
    }

    .botm {
        display: flex;
        justify-content: space-around;
        margin-top: 20rpx;
        color: #333;

        text {
            font-size: 24rpx;
            margin-left: 10rpx;
        }

        .active {
            color: #0199fe;
        }
    }

    .nameLimit {
        max-width: 300rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        word-break: break-all;
        white-space: nowrap;
    }

    .contentLimit {
        word-break: break-all;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
</style>